<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商品详情页</title>

    <!-- Bootstrap -->
    <link href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/product_details.css" rel="stylesheet" />
    <link href="/css/common.css" rel="stylesheet" />
    <link href="/css/index.css" rel="stylesheet" />
    <link href="/css/pop-up.css" rel="stylesheet" media="all"/>
    <!-- Custom styles -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/js/common/jquery-3.1.1.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>

    <![endif]-->
    <script src="/js/index.js"></script>
    <script src="/js/common/jquery-3.1.1.min.js"></script>
    <script src="/js/common/html5shiv.min.js"></script>
    <script src="/js/common/respond.min.js"></script>
    <script src="/js/common/jquery.fly.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div data-th-replace="common_html/common_head"></div>
    <div class="row banner">
        <div class="col-xs-2"></div>
        <div class="col-xs-8">
            <div class="row">
                <div class="col-xs-3 logo"><a class="mr-15 " th:href="@{/}"><img src="/img/cute_logo.jpg" class="logo_wh"/></a></div>
                <div class="col-xs-5 font-bold">
                </div>
                <div class="col-xs-4">
                    <form class="form-inline" th:action="@{/product/searchGood}">
                        <div class="form-group">
                            <input type="text" name="search" class="form-control search" placeholder="商品关键字" />
                        </div>
                        <button type="submit" class="search-btn">搜索</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="page-header">
            <a href="../shop/shop_homepage.html" th:href="@{/demo/shopHomepage}"><h1 th:text="${seller.shopName}">淡雅墨色画社</h1></a>
        </div>
    </div>
    <div class="presentation row">
        <div class="col-xs-5 col-xs-offset-1" id="detailPicture">
            <img style="width:400px;height:400px;" th:src="@{'/picture/'+${product.pictureId}}" src="#"/><br/>
            <!--<a th:if="${product.id}!=${favorite.productId}" th:herf="@{'/addToFavorite/'+${product.Id}}"  class="glyphicon glyphicon-heart-empty font-black border-one"> 加入收藏夹</a>-->
            <!--<a th:herf="#" th:if="${product.id}!=${favorite.productId}"  class="glyphicon glyphicon-heart" disabled="disabled" >已加入收藏夹</a>-->
        </div>
        <div class="col-xs-6">
            <div class="row"> <h2 class="col-xs-12 text-center" th:text="@{${product.name}}">赵丽颖肖像画素描画颖宝</h2></div>

            <div class="price mt-20 mb-4 pt-40 pb-40">
                <div class="pricetwo row mt-10 mb-10"><div class="col-xs-11 col-xs-offset-1"><span>达米价:</span><span th:text="${product.price}">90</span></div></div>
                <div class="row mt-30 " >
                   <span class="col-xs-11 col-xs-offset-1 font-17" >所属校区：<span th:text="@{${campus}}">东南大学</span></span>
                </div>
                <div class="row mt-30 " >
                    <span class="col-xs-11 col-xs-offset-1 font-17" style="color: #AA0000;">联系方式:<span th:text="${seller.mobile}">130629023**</span></span>
                </div>
                <div class="row mt-30">
                    <div class="col-xs-2 col-xs-offset-1  text-danger mt-8 font-17">数量</div>
                    <div class="input-group col-xs-2">
                        <span style="cursor: pointer" class="input-group-addon" th:onclick="@{'javascript:changeNum('+'\'minus\''+')'}" >-</span>
                        <input id="productNum" type="text" class="form-control text-center" value="1" style="width: 60px" />
                        <span style="cursor: pointer" class="input-group-addon" th:onclick="@{'javascript:changeNum('+'\'add\''+')'}">+</span>
                    </div>
                </div>
            </div>
            <div class="row text-center" >
                <!--
                <a href="#">
                    <button class="col-xs-2 btn-style">立即购买</button>
                </a>
                -->
                <th:block th:if="${session.userBase} neq null">
                    <th:block th:if="${session.userBase.role} eq 'buyer'">
                <button class="col-xs-3 btn-style addcar" th:onclick="@{'javascript:addProductToCart('+${product.id}+')'}">
                    <span class="glyphicon glyphicon-shopping-cart"></span>
                   加入购物车
                </button>
                    </th:block>
                    <th:block th:if="${session.userBase.role} neq 'buyer'">
                        <a href="/buyer/shopping_cart_change/?id=0">
                            <button class="col-xs-3 btn-style">
                                <span class="glyphicon glyphicon-shopping-cart"></span>
                                加入购物车
                            </button>
                        </a>
                    </th:block>
                </th:block>
                <th:block th:if="${session.userBase} eq null">

                    <a href="/buyer/shopping_cart_change/?id=0">
                    <button class="col-xs-3 btn-style">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                        加入购物车
                    </button>
                    </a>
                </th:block>

                <a th:href="@{'/buyer/shopping_cart'}">
                    <button type="button" class="float-right mr-15 btn-style" id="end">我的购物车 <span class="badge"></span></button>
                </a>
            </div>
        </div>
    </div>
    <div id="msg">已成功加入购物车！</div>
    <ul id="myTab" class="nav nav-tabs mt-150">
        <li class="active"><a href="#good_details" data-toggle="tab">商品详情</a></li>
        <li><a href="#comments" data-toggle="tab">评价</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active font-middle" id="good_details">
            <div class="row mt-40">
                <h3>商品详情描述</h3>
                <div th:text="${product.description}"></div>
            </div>
            <div class="row" >
                <div class="col-xs-5 col-xs-offset-1" >
                    <div class="thumbnail">
                        <img style="width:300px;height:300px;" th:src="@{'/picture/'+${product.pictureId}}" src="#"/>
                        <div class="caption">
                            <span>详情图1</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="comments">
            <dl class="dl-horizontal font-middle" th:each="comment : ${comments}" >
                <dt id="buyername" th:text="${comment.getBuyer().getBuyerName()}">刘小明</dt>
                <dd th:text="${comment.text}" >画工很好，相识度很高，运货速度也不错，就是眼镜有点瑕疵，下次还回来这购买。画工很好，相识度很高，运货速度也不错，就是眼镜有点瑕疵，下次还回来这购买。画工很好，相识度很高，运货速度也不错，就是眼镜有点瑕疵，下次还回来这购买。画工很好，相识度很高，运货速度也不错，就是眼镜有点瑕疵，下次还回来这购买。画工很好，相识度很高，运货速度也不错，就是眼镜有点瑕疵，下次还回来这购买。画工很好，相识度很高，运货速度也不错，就是眼镜有点瑕疵，下次还回来这购买。</dd>
            </dl>
            <div class="row">
                <div class="col-xs-12" style="text-align: center ">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid mt-20">
    <div class="row">
        <div class="col-xs-12 footer-info">
            <div class="col-xs-2 col-xs-offset-3 mt-40 "><img src="/img/logo_button_1.jpg"/></div>
            <div class="col-xs-3 mt-40 "><img src="/img/logo_button_2.jpg " /><br/><span class="font-grey font-15" >一家专门做校园文化产品的网站</span></div>
            <div class="col-xs-4 mt-60"><img class="qr-code"  src="/img/qr_code.png" th:src="@{'/picture/72'}"/><br/><div class="mt-20 font-15 ml-10">扫码有惊喜哦</div></div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row mt-20 font-small">
        <div class="col-xs-2"></div>
        <div class="col-xs-8">
            <div id="footer">
                <div class="footerNav text-center">
                    <a href="#" th:href="@{/demo/aboutUs}">关于我们</a> |
                    <a href="#" th:href="@{/demo/service}">服务条款</a> |
                    <a href="#" th:href="@{/demo/map}">网站地图</a> |
                    <a href="#" th:href="@{/demo/contactUs}">联系我们</a>
                </div>
                <div class="copyRight text-center">
                    Copyright DaMi
                </div>
            </div>
        </div>
        <div class="col-xs-2"></div>
    </div>
</div>
<script src="/js/login.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/


    var isShowLogin = /*[[${showLogin}]]*/ 'Sebastian';
    if(isShowLogin){
        $('.theme-logIn').click();
    }

    /*]]>*/
</script>
    <script src="/js/product_detail.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>